<template>
	<div class="theme">
		<div class="overlay">
			<div class="overlay-content scrolling">
				<van-nav-bar :title="'导出' + type" left-text left-arrow @click-left="$router.back()" :border="false">
				</van-nav-bar>
				<div class="Keystore">
					<div class="Keystore-title">
						<van-tabs v-model="active" line-width="50%" color="#22a0ff" title-active-color="#22a0ff" swipeable :border="false" @change="tabsChange">
							<van-tab :title="type">
								<div class="Keystore-content">
									<div class="Keystore-content-mid">
										<div class="Keystore-content-mid-title">
											<div>
												<p class="Keystore-content-mid-title-title">
													离线保存
												</p>
												<p class="Keystore-content-mid-title-content">
													切勿保存至邮箱、记事本、网盘、聊天工具等，非常危险
												</p>
											</div>
											<div>
												<p class="Keystore-content-mid-title-title">
													请勿使用网络传输
												</p>
												<p class="Keystore-content-mid-title-content">
													请勿通过网络工具传输，一旦被黑客获取将造成不可挽回的资产损失。建议你先设备通过二维码方式传输。
												</p>
											</div>
											<div>
												<p class="Keystore-content-mid-title-title">
													密码管理工具保存
												</p>
												<p class="Keystore-content-mid-title-content">
													建议使用密码管理工具管理
												</p>
											</div>
										</div>
										<div class="Keystore-content-mid-content">
											<json-viewer :value="JSON.parse(keystore)" v-if="type == 'Keystore'"></json-viewer>
											<div class="sy" v-text="keystore" v-else>

											</div>
										</div>
										<div class="Keystore-content-mid-foot">
											<div>
												<van-button class="copybtn" type="primary" color="#108ce9" :style="{width:'100%',borderRadius:'6px'}" @click="copy" :data-clipboard-text="keystore" :loading="copyLoading">复制{{type}}</van-button>
											</div>
										</div>
									</div>
								</div>
							</van-tab>
							<van-tab title="二维码">
								<div class="Keystore-content">
									<div class="Keystore-content-mid">
										<div class="Keystore-content-mid-title">
											<div>
												<p class="Keystore-content-mid-title-title">
													仅供直接扫描
												</p>
												<p class="Keystore-content-mid-title-content">
													二维码禁止保存、截图、以及拍照。仅供用户在安全环境下直接扫描来方便的导入钱包
												</p>
											</div>
											<div>
												<p class="Keystore-content-mid-title-title">
													在安全环境下使用
												</p>
												<p class="Keystore-content-mid-title-content">
													请在确保四周无人及摄像头的情况下使用。二维码一但被他人获取将造成不可挽回的的资产损失
												</p>
											</div>
										</div>
										<div class="Keystore-content-mid-content-right">
											<div v-show="!code">
												<img src="../../assets/images/keystore1.png" width="100px" />
												<p>
													<van-button type="primary" color="#108ce9" :style="{width:'60%',borderRadius:'6px'}" size="small" @click="code = true">显示二维码</van-button>
												</p>
											</div>
											<div v-show="code">
												<!--<img src="../../assets/images/erweima_03.png" width="100%" :style="{margin:'0'}" />-->
												<qriously :value="keystore" :size="size" />
											</div>
										</div>
									</div>
								</div>
							</van-tab>
						</van-tabs>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import JsonViewer from 'vue-json-viewer'
	let _this;
	export default {
		name: 'Keystore',
		components: {
			JsonViewer
		},
		props: {},
		data() {
			return {
				active: '1',
				code: false,
				type: '',
				keystore: localStorage.Mnemonic,
				size: 200,
				copyLoading: false
			};
		},
		beforeCreate() {
			_this = this;
		},
		watch: {},
		computed: {},
		methods: {
			tabsChange() {
				this.code = false;
			},
			copy() {
				this.copyLoading = true;
				let clipboard = new ClipboardJS('.copybtn')
				clipboard.on('success', e => { 
					this.$toast('复制成功');
					clipboard.destroy();
					this.copyLoading = false;
				})
				clipboard.on('error', e => { 
					this.$toast('复制失败');
					clipboard.destroy();
					this.copyLoading = false;
				})
			}
		},
		created() {
			this.type = Number(this.$route.query.type) == 2 ? 'Keystore' : '私钥'
		},
		mounted() {},
		destroyed() {

		},
		filters: {}
	};
</script>

<style lang="less" scoped>
	.overlay {
		background: #FFFFFF;
		img,
		i {
			vertical-align: text-bottom;
		}
	}
	
	.Keystore {
		.Keystore-content {
			.Keystore-content-mid {
				.Keystore-content-mid-title {
					padding: 20px;
					background: #fbfcfd;
					border-bottom: 1px solid #e7eced;
					div {
						margin-bottom: 20px;
					}
					div:last-child {
						margin-bottom: 0;
					}
					.Keystore-content-mid-title-title {
						color: #22a0ff;
						font-size: 15px;
					}
					.Keystore-content-mid-title-content {
						color: #999999;
						font-size: 13px;
					}
				}
				.Keystore-content-mid-content {
					margin-top: 30px;
					padding: 10px;
					div:first-child {
						background: #fbfcfd;
						color: #666666;
						border: 1px solid #e7eced;
						border-radius: 5px;
					}
				}
				.Keystore-content-mid-foot {
					margin-top: 40px;
					padding: 0 20px;
				}
				.Keystore-content-mid-content-right {
					padding: 30px 50px;
					text-align: center;
					div:first-child {
						background: #fbfcfd;
						border: 1px solid #e7eced;
						border-radius: 5px;
						padding: 20px;
						img {
							margin: 20px 0 50px;
						}
					}
				}
			}
		}
	}
	
	.sy {
		word-break: break-all;
		word-wrap: break-word;
		padding: 10px;
	}
</style>